<script setup>
import { getCurrentInstance, h, onMounted, ref } from "vue";
import Group from '@/components/Group/index.vue'
import { message } from 'ant-design-vue';
import officeApi from "@/api/office/officeApi";

import engine from "./engine.vue";

const search = ref();
const { proxy } = getCurrentInstance();
const refresh = () => {
	tableRef.value.refresh();
}
const engineInstance = ref();

const tableRef = ref();

const columns = ref([
	{
		title: '名称',
		key: 'workName',
		dataIndex: 'workName',
		ellipsis: true,
	},
	{
		title: '编码',
		key: 'workCode',
		dataIndex: 'workCode',
		ellipsis: true,
	},
	{
		title: '操作',
		key: 'action',
		dataIndex: 'action',
		ellipsis: true,
		width: 70,
		fixed: 'right',
		buttonList: [
			{
				click: (field, record) => {
					edit(record)
				},
				render: (record) => {
					return "编辑";
				}
			},
			{
				type: 'primary',
				click: (field, record) => {
					doc(record)
				},
				render: (record) => {
					return "文档";
				}
			},
			{
				click: (field, record) => {
					remove(record)
				},
				render: (record) => {
					return '删除';
				}
			}
		]
	}
])


const save = async () => {
	if (!officeConfig.value.groupId) {
		officeConfig.value.groupId = currentGroupId.value == 0 ? null : currentGroupId.value
		officeConfig.value.productId = proxy.$route.query.productId;
	}

	if (!officeConfig.value.groupId) {
		message.error("请选择分组")
		return
	}
	officeConfig.value.typeCode = 'ppt';
	const s = await officeApi.save(officeConfig.value);
	officeConfig.value = {}
	officeConfig.value.visible = false;
	refresh();
}
const officeConfig = ref({
	visible: false
});
const queryList = async () => {
	return await officeApi.queryList({
		groupId: currentGroupId.value == 0 ? null : currentGroupId.value,
		productId: proxy.$route.query.productId,
		typeCode: "ppt"
	});

}

const edit = async (row) => {
	const a = await officeApi.getById({ id: row.id });
	officeConfig.value = a;
	officeConfig.value.visible = true;
}

const remove = async (row) => {
	const a = await officeApi.removeById(row.id);
	refresh();
}

const doc = (row) => {
	officeConfig.value.id = row.id;
	officeConfig.value.docFlag = true;

}

const saveContent = () => {
	let data = engineInstance.value.getValue();

	officeApi.saveContent({
		officeId: officeConfig.value.id,
		content: JSON.stringify(data),
		fileTypeCode: "pptx"
	});

	officeConfig.value.docFlag = false;
}

const currentGroupId = ref(0);

const selectTree = (id, code, name) => {
	currentGroupId.value = id;
	refresh();
}
</script>

<template>
	<a-row :gutter="10" class="mb-2">
		<a-col :span="5">
			<Group :selectTree="selectTree" relationTypeCode="OFFICE" :productId="proxy.$route.query.productId"></Group>
		</a-col>
		<a-col :span="19">
			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<a-space>
							<a-input-search placeholder="请输入内容" v-model:value="search"
								@search="refresh"></a-input-search>
							<a-button @click="officeConfig.id = null; officeConfig.visible = true;"
								type="primary">新增</a-button>
						</a-space>
					</a-card>
				</a-col>
			</a-row>

			<a-row :gutter="10" class="mb-2">
				<a-col :span="24">
					<a-card>
						<h-table :columns="columns" ref="tableRef" :data="queryList">

						</h-table>
					</a-card>
				</a-col>
			</a-row>
		</a-col>
	</a-row>

	<a-modal v-model:open="officeConfig.visible" :closable="false" width="300px">
		<a-form :model="officeConfig">
			<a-form-item label="名称">
				<a-input v-model:value="officeConfig.workName"></a-input>
			</a-form-item>

			<a-form-item label="编码">
				<a-input v-model:value="officeConfig.workCode"></a-input>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-space>
				<a-button @click="officeConfig.visible = false">取 消</a-button>
				<a-button type="primary" @click="save">确 定</a-button>
			</a-space>
		</template>
	</a-modal>

	<a-modal :destroyOnClose="true" v-model:open="officeConfig.docFlag" :closable="false" width="100%" height="100%"
		wrap-class-name="my-modal full-modal" @ok="saveContent">
		<div style="height:410px">
			<engine :officeId="officeConfig.id" ref="engineInstance"></engine>
		</div>
	</a-modal>

</template>

<style lang="less">
.my-modal {

	.ant-modal-footer {
		margin-bottom: 15px !important;
	}
}

.full-modal {
	.ant-modal {
		max-width: 100%;
		top: 0;
		padding-bottom: 0;
		margin: 0;
	}

	.ant-modal-content {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}

	.ant-modal-body {
		flex: 1;
	}
}
</style>
